<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 信息 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <title>归档</title>
    <meta name="author" content="尘跃" />
    <meta
        name="description"
        content="归档"
    />


    <!-- Facebook Open Graph -->
    <meta property="og:site_name" content="" />
    <meta property="og:title" content="归档" />
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://cyue.net/pages/archive.html">
    <meta property="og:image" content="/favicon.png" />
    <meta
        property="og:description"
        content="归档"
    />

    <!-- Twitter Cards -->
    <meta name=twitter:card content="summary" />
    <meta name=twitter:image content="/favicon.png" />
    <meta name="twitter:title" content="归档" />
    <meta name=twitter:description content="归档" />
    <meta name="twitter:creator" content="@尘跃" />
    <meta name="twitter:site" content="@cyue.net" />


    <!-- style -->
    <link rel="stylesheet/less" type="text/css" href="/css/style.less">
    <!-- less -->
    <script src="/js/third/less.min.js"></script>
    <style>
        .panel {
            padding: 1.5rem;
        }
    </style>

    <!-- swiper -->
    <link rel="stylesheet" href="/css/third/swiper-bundle.min.css">

    <!-- website configuration -->
    <script src="/js/configuration.js"></script>
    <!-- Vue3 -->
    <script src="/js/vue/vue.global.prod.js"></script>

    <!-- 百度统计 -->
    <script src="/js/tongji.js"></script>
    <!-- WX JS SDK -->
    <script src="/js/wx.js"></script>
    <!-- Google ADS -->
    <!-- <meta name="google-adsense-account" content="ca-pub-7556556693775855">
    <script src="/js/ads.js"></script> -->

</head>
<body>
    <page-header></page-header>

    <main id="app">
        <div class="panel">
            <div>
                <span class="tag is-primary">{{ archiveName }}</span>
            </div>
            <div style="margin-left: 2em;">
                <ul class="flex-column" style="list-style: circle;gap: 0.5em;" v-auto-animate>
                    <li v-for="item in articleDataSource">
                        <p style="font-size: small;">
                            <time style="color: rgb(122, 122, 122);">{{ item.date }}</time>
                        </p>
                        <p style="font-size: large;">
                            <a :href=" '/pages/article.html?id=' + item.id ">{{ item.title }}</a>
                        </p>
                        <p style="font-size: small;">
                            <a :href=" '/pages/sort.html#' + item.sort_name " style="color: rgb(122, 122, 122);">{{ item.sort_name }}</a>
                        </p>
                    </li>
                </ul>
            </div>

        </div>
        <!-- 侧边栏 -->
        <aside class="box-aside">
            <!-- 文章归档 -->
            <page-article-archive></page-article-archive>
        </aside>
    </main>

    <page-footer></page-footer>


    <!-- web component -->
    <script src="/js/component.js"></script>
    <!-- style -->
    <script src="/js/style.js"></script>

    <!-- Vue APP -->
    <script src="/js/http.js"></script>
    <script type="module">
        // AutoAnimate
        import { autoAnimatePlugin } from "/js/third/auto-animate-vue.mjs";

        const requestParams = HTTP.getRequestParams();
        const archiveName = requestParams["name"];
        if (!archiveName) {
            alert("归档不存在");
            window.location.href = "/index.html";
        }


        const { createApp } = Vue;
        const app = createApp({

            async mounted() {
                this.archiveName = archiveName;

                const archiveResponse = await HTTP.request({
                    method: "GET",
                    url: `/api/article/archive/name/${archiveName}`
                })
                const archiveResult = archiveResponse.data;
                const archiveArray = archiveResult.data;
                for (const archive of archiveArray) {
                    const articleResponse = await HTTP.request({
                        method: "GET",
                        url: `/api/article/information/${archive.article_id}`
                    });
                    const articleResult = articleResponse.data;
                    if (articleResult.type === "success") {
                        this.articleDataSource.push(articleResult.data);
                    }
                }
            },

            data() {
                return {
                    archiveName: "",
                    articleDataSource: []
                }
            },

            methods: {
            }
        });
        app.use(autoAnimatePlugin);
        app.mount("#app");
    </script>
</body>


</html>


